<template>
    <div class="wrapper">
        <head-bar height="80" middleText="动态详情" :leftClick="returnPage"></head-bar>

        <div class="item-head">
            <image @click="getUserInfo(demo)" class="photo" src="root:img/my_photo.png"></image>
            <div class="head-info">
                <text class="head-info-t weight">药械圈会员02</text>
                <text class="head-info-t">2018-10-10</text>
            </div>
        </div>

        <div class="content-main"></div>

        <div class="content-like">
            <div style="flex-direction: row;">
            <image style="width: 50px;height: 50px;" src="root:img/speechDetail/like.png"></image>
            <text style="font-size: 32px;line-height: 50px;color:#5f5f5f;">(1)</text>
            </div>
        </div>

        <div class="line"></div>

        <!--评论区-->
        <div class="comments" v-for=" (c,key) in comments" @click="setSendMan(c.comment_id,null,c.create_user)">
            <div class="comments-head">
                <image class="comments-head-photo" src="img/my_photo.png"></image>
                <div class="comments-head-info">
                    <div class="comments-name-t">{{c.create_user_name}}</div>
                    <div class="comments-publish-t">{{formatDay(c.create_time)}}</div>
                </div>
                <div style="float: right;height: 50px;padding-top: 13px;">
                    <image class="comments-like-t"
                           :src="commentsLikes[c.comment_id] ? 'img/comments/like.png':'img/comments/un-like.png'"
                           @click.stop="commentsLike(c.comment_id,key)"></image>
                    <p style="font-size: 12px;float: right;margin-left: 3px;margin-top: 3px;color: #cdcdcd;">
                        {{c.like_num}}</p>
                </div>

            </div>
            <div class="comments-content">
                <span class="comments-t">{{decodeURIComponent(c.content)}}</span>
            </div>
            <div class="reply">
                <div class="reply-main" v-for="cr in c.listReply">
                    <div class="reply-user" @click.stop="setSendMan(c.comment_id,cr.reply_id,cr.create_user)">
                        <span class="reply-from-t">{{cr.create_user_name}}</span>
                        <span class="reply-link-t">回复</span>
                        <span class="reply-to-t">{{cr.comment_user_name}}</span>
                    </div>
                    <div class="reply-content">
                        <!--<span class="reply-content-t">{{cr.content.utf8urldecode()}}</span>-->
                        <span class="reply-content-t">{{decodeURIComponent(cr.content)}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 50px;width: 100%;">f</div>

    </div>
</template>
<!--评论区样式-->
<style>

    /*回复内容*/
    .reply-content-t {
        font-size: 12px;
        color: #272727;
    }

    /*回复内容区*/
    .reply-content {
    }

    /*回复评论人*/
    .reply-to-t {
        color: #00c470;
        font-size: 12px;
        margin-right: 10px;
    }

    .reply-link-t {
        margin-left: 10px;
        margin-right: 10px;
        color: #a1a1a1;
        font-size: 12px;
    }

    /*回复人*/
    .reply-from-t {
        color: #00c470;
        font-size: 12px;
    }

    .reply-user {
        flex-direction: row;
    }

    /*回复主体区*/
    .reply-main {
        flex-direction: column-reverse;
        margin-top: 2px;
        margin-bottom: 2px;
        padding-left: 10px;
    }

    .reply-main:first-child {
        padding-top: 5px;
    }

    .reply-main:last-child {
        padding-bottom: 5px;
    }

    /*回复区*/
    .reply {
        border-width: 1px;
        border-color: #dddddd;
        border-radius: 10px;
        background-color: #f0f0f0;
        margin-bottom: 10px;
    }

    /*评论内容*/
    .comments-t {
        font-size: 12px;
        width: 100%;
        height: auto;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }

    /*评论内容区*/
    .comments-content {
        padding-top: 20px;
        padding-bottom: 10px;
        height: auto;
    }

    /*评论点赞*/
    .comments-like-t {
        width: 20px;
        height: 20px;
        float: left;
    }

    /*评论发布时间*/
    .comments-publish-t {
        color: #00c470;
        font-size: 12px;
        color: #999999;
        margin-top: 5px;
    }

    /*评论人名称*/
    .comments-name-t {
        color: #00c470;
        font-size: 12px;
    }

    .comments-head-info {
        flex-direction: column;
        margin-left: 8px;
        float: left;
    }

    /*头像*/
    .comments-head-photo {
        width: 40px;
        height: 40px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        float: left;
    }

    /*评论头像信息区*/
    .comments-head {
        height: 40px;
    }
</style>

<style>
    .wrapper{
        flex-direction: column;
        width: 750px;
    }


    .line{
        height: 1px;
        border-top-width: 1px;
        border-top-color: #bdbdbd;
    }

    .content-like{
        justify-content: center;
        align-items: center;
        width: 750px;
        height: 100px;
    }

    .content-main{
        height: 500px;
        width: 750px;
        border-width: 1px;border-color: #00B4FF;
    }

    .head-info{
        margin-left: 15px;
        flex-direction: column;
    }
    .head-info-t{
        font-size: 28px;
        color:#5f5f5f;
        margin-bottom: 10px;
    }

    .item-head{
        margin-top: 15px;
        margin-bottom: 15px;
        flex-direction: row;
    }
    .photo{
        height: 80px;
        width: 88px;
        border-radius: 100px;
        margin-left: 10px;
        border-width: 1px;
        border-color: #717171;

    }

</style>

<style>
    .weight{
        font-weight: 800;
    }
</style>

<style>
    .webview{
        position: absolute;
        top: 0 ;
        left: 0;
        right:0;
        bottom: 0;
    }

    .webview-box {
        position: absolute;
        top: 114px ;
        left: 0;
        right:0;
        bottom: 0;
    }
    /*.wrapper{*/
        /*position: absolute;*/
        /*left: 0;*/
        /*right:0;*/
        /*bottom: 0;*/
        /*top:0;*/
    /*}*/

</style>

<script>
    import headBar from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import dtl from '../utils/dateUtils.js'

    const dom = weex.requireModule('dom')


    var pref = weex.requireModule('pref')

    const url = {
        detail: '/app/yxq/speech/',
        articleLike: '/app/yxq/article/like'
    }

    export default {
        data: {
            isLoad: false,//是否请求网络
            param:{},
            info:{},
            comments:[]
        },
        components: {headBar},
        computed: {

        },
        methods: {
            //返回上个页面
            returnPage: function () {
                var nav = weex.requireModule('navigator')
                nav.back()
            },

            //触发给谁发表评论
            setSendMan(commentsId, replyId, userId) {

                if (userId && userId == this.userId) {
                    this.sendReplyId = 0
                    this.sendCommentsId = 0
                    this.sendWho = ''
                    return
                }

                if (commentsId == null && replyId == null) {
                    this.sendCommentsId = 0
                    this.isSend = true
                    this.sendWho = ''
                    return
                }


                var replyList = null

                if (commentsId != null) {

                    for (var i = 0; i < this.comments.length; i++) {
                        var temp = this.comments[i]
                        if (temp.comment_id == commentsId) {
                            this.sendWho = `@${temp.create_user_name.substring(0, 3)}...`
                            replyList = temp.listReply
                            break
                        }
                    }

                    this.sendCommentsId = commentsId
                }

                if (replyId != null) {

                    if (replyList) {
                        for (var i = 0; i < replyList.length; i++) {
                            var temp = replyList[i]
                            if (temp.reply_id == replyId) {
                                this.sendWho = `@${temp.create_user_name.substring(0, 3)}...`
                                break
                            }
                        }
                    }
                    this.sendReplyId = replyId
                }
                this.isSend = true
                this.$refs['input'].focus()

            },
            onLoad(){
                const navigator = weex.requireModule('navigator')
                var param = navigator.param()
               this.param = param

                //存储用户信息
                var userInfo = pref.get('user_info')
                // this.userId = userInfo.userId

                var modal = weex.requireModule('modal')
                modal.alert({message:JSON.stringify(userInfo)})
                return
                //请求文章数据
                var self = this
                nw.postDefine(`${url.detail}${param.id}`,{
                    success(res){
                        self.info = res.info
                        self.comments = res.comments
                    }
                })
            }
        }
    }

</script>

